<template>
	<view class="page">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="back-button" @click="goBack">
				<view class="back-icon">&#xe600;</view>
			</view>
			<view class="title">我的订单</view>
			<view class="menu-button">
				<view class="menu-icon">•••</view>
			</view>
		</view>
		
		<!-- 订单完成状态 -->
		<view class="status-container">
			<view class="status-content">
				<image class="status-icon" src="/static/svg/order-success.svg"></image>
				<view class="status-text">
					<view class="status-title">订单已完成</view>
					<view class="status-subtitle">满意请给五星好评吧</view>
				</view>
			</view>
		</view>
		
		<!-- 收货地址信息 -->
		<view class="address-info">
			<view class="location-icon">
				<view class="location-dot"></view>
			</view>
			<view class="address-detail">
				<view class="user-info">
					<text class="username">李小花</text>
					<text class="phone">1885138766</text>
				</view>
				<view class="address-text">广东省广州市大华区明离路科技园880号</view>
			</view>
		</view>
		
		<!-- 快递信息 -->
		<view class="delivery-info">
			<view class="delivery-icon">
				<view class="truck-icon"></view>
			</view>
			<view class="delivery-text">
				您的快递已取出，如有问题可致电
				<text class="phone-number">2659-263696369</text>
			</view>
			<view class="arrow-icon">></view>
		</view>
		
		<!-- 拼团信息 -->
		<view class="group-info">
			<view class="group-icon">
				<view class="user-icon"></view>
			</view>
			<view class="group-text">拼团成功</view>
			<view class="group-members">
				<view class="member leader">
					<image class="avatar" src="/static/svg/default-avatar.svg"></image>
					<view class="leader-tag">团长</view>
				</view>
				<view class="member">
					<image class="avatar" src="/static/svg/default-avatar.svg"></image>
				</view>
			</view>
			<view class="group-detail-button">拼团详情</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="product-card">
			<view class="product-tag">3人团</view>
			<view class="product-content">
				<image class="product-image" src="/static/svg/matcha-cake.svg"></image>
				<view class="product-info">
					<view class="product-title">艾丽莎抹茶蛋糕早点低糖健康</view>
					<view class="product-spec">实惠装</view>
					<view class="product-price-info">
						<view class="product-price">¥136</view>
						<view class="product-quantity">×1</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 订单金额信息 -->
		<view class="order-price-info">
			<view class="price-item">
				<text class="price-label">商品总额：</text>
				<text class="price-value">¥136.00</text>
			</view>
			<view class="price-item">
				<text class="price-label">运费：</text>
				<text class="price-value">¥0.00</text>
			</view>
			<view class="price-item">
				<text class="price-label">商品优惠：</text>
				<text class="price-value discount">-¥10.00</text>
			</view>
			<view class="price-item total">
				<text class="price-label">实付款：</text>
				<text class="price-value">¥126.00</text>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<view class="button service-button">申请售后</view>
			<view class="button track-button">查看物流</view>
			<view class="button evaluate-button" @click="submitReview">评价</view>
		</view>
		
		<!-- 评价弹窗 -->
		<view class="rating-modal" v-if="showRatingModal">
			<view class="modal-mask" @click="closeRatingModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<view class="modal-title">评价</view>
					<view class="close-icon" @click="closeRatingModal">×</view>
				</view>
				<view class="rating-content">
					<view class="product-brief">
						<image class="product-thumbnail" src="/static/svg/matcha-cake.svg"></image>
						<view class="product-brief-name">艾丽莎抹茶蛋糕早点低糖健康</view>
					</view>
					<view class="star-rating">
						<view class="rating-label">整体评分</view>
						<view class="stars">
							<image 
								v-for="index in 5" 
								:key="index"
								:src="rating >= index ? '/static/svg/star-filled.svg' : '/static/svg/star-empty.svg'"
								class="star"
								@click="setRating(index)"
							></image>
						</view>
					</view>
					<view class="review-input">
						<textarea placeholder="分享你的评价..." v-model="reviewText"></textarea>
					</view>
					<view class="photo-upload">
						<view class="upload-button">
							<view class="plus-icon">+</view>
							<view class="upload-text">添加图片</view>
						</view>
					</view>
					<view class="submit-button" @click="submitReviewFinal">提交评价</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 评分相关变量
const rating = ref(5);
const reviewText = ref('');
const showRatingModal = ref(false);

// 设置评分
const setRating = (value) => {
	rating.value = value;
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 打开评价弹窗
const submitReview = () => {
	showRatingModal.value = true;
};

// 关闭评价弹窗
const closeRatingModal = () => {
	showRatingModal.value = false;
};

// 提交评价
const submitReviewFinal = () => {
	// 这里应该是提交评价的API调用
	uni.showToast({
		title: '评价提交成功',
		icon: 'success'
	});
	closeRatingModal();
	// 评价成功后返回订单列表
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
};
</script>

<style>
.page {
	background-color: #F6F6F6;
	min-height: 100vh;
}

/* 顶部导航样式 */
.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #FFFFFF;
}

.back-button {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-family: "iconfont";
	font-size: 24px;
}

.title {
	font-size: 18px;
	font-weight: bold;
}

.menu-button {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-icon {
	font-size: 20px;
}

/* 订单状态样式 */
.status-container {
	background-color: #FF6B35;
	padding: 20px 15px;
	color: white;
}

.status-content {
	display: flex;
	align-items: center;
}

.status-icon {
	width: 60px;
	height: 60px;
	margin-right: 15px;
}

.status-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.status-subtitle {
	font-size: 14px;
	opacity: 0.9;
}

/* 地址信息样式 */
.address-info {
	background-color: #FFFFFF;
	padding: 15px;
	display: flex;
	margin-top: 10px;
}

.location-icon {
	width: 30px;
	height: 30px;
	background-color: #F0F0F0;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.location-dot {
	width: 10px;
	height: 10px;
	background-color: #FF6B35;
	border-radius: 50%;
}

.address-detail {
	flex: 1;
}

.user-info {
	display: flex;
	margin-bottom: 5px;
}

.username {
	font-weight: bold;
	margin-right: 10px;
}

.phone {
	color: #666;
}

.address-text {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}

/* 快递信息样式 */
.delivery-info {
	background-color: #FFFFFF;
	padding: 15px;
	display: flex;
	align-items: center;
	margin-top: 1px;
}

.delivery-icon {
	width: 30px;
	height: 30px;
	margin-right: 10px;
}

.truck-icon {
	width: 25px;
	height: 25px;
	background-image: url('/static/svg/logistics-truck.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.delivery-text {
	flex: 1;
	font-size: 14px;
	color: #333;
}

.phone-number {
	color: #666;
}

.arrow-icon {
	color: #999;
	font-size: 18px;
}

/* 拼团信息样式 */
.group-info {
	background-color: #FFFFFF;
	padding: 15px;
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.group-icon {
	width: 30px;
	height: 30px;
	margin-right: 10px;
}

.user-icon {
	width: 25px;
	height: 25px;
	background-image: url('/static/svg/default-avatar.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.group-text {
	margin-right: 15px;
	font-size: 14px;
	color: #333;
}

.group-members {
	display: flex;
	flex: 1;
}

.member {
	position: relative;
	margin-right: -10px;
}

.avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
}

.leader-tag {
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FF6B35;
	color: white;
	font-size: 10px;
	padding: 2px 5px;
	border-radius: 8px;
}

.group-detail-button {
	color: #FF6B35;
	font-size: 14px;
	padding: 5px 10px;
	border: 1px solid #FF6B35;
	border-radius: 15px;
}

/* 商品信息样式 */
.product-card {
	background-color: #FFFFFF;
	margin-top: 10px;
	padding: 15px;
	position: relative;
}

.product-tag {
	position: absolute;
	top: 15px;
	left: 15px;
	background-color: #FF6B35;
	color: white;
	font-size: 12px;
	padding: 2px 6px;
	border-radius: 10px;
	z-index: 1;
}

.product-content {
	display: flex;
	padding-top: 10px;
}

.product-image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	margin-right: 10px;
}

.product-info {
	flex: 1;
}

.product-title {
	font-size: 15px;
	color: #333;
	margin-bottom: 5px;
	line-height: 1.4;
}

.product-spec {
	font-size: 13px;
	color: #999;
	margin-bottom: 10px;
}

.product-price-info {
	display: flex;
	justify-content: space-between;
}

.product-price {
	font-size: 16px;
	color: #FF6B35;
	font-weight: bold;
}

.product-quantity {
	font-size: 14px;
	color: #999;
}

/* 订单金额信息样式 */
.order-price-info {
	background-color: #FFFFFF;
	margin-top: 1px;
	padding: 15px;
}

.price-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.price-label {
	color: #666;
	font-size: 14px;
}

.price-value {
	color: #333;
	font-size: 14px;
}

.discount {
	color: #FF6B35;
}

.total {
	border-top: 1px solid #F0F0F0;
	padding-top: 10px;
}

.total .price-label,
.total .price-value {
	font-weight: bold;
}

/* 底部按钮样式 */
.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	background-color: #FFFFFF;
	padding: 10px 15px;
	border-top: 1px solid #F0F0F0;
}

.button {
	padding: 10px 15px;
	text-align: center;
	border-radius: 20px;
	margin-right: 10px;
	font-size: 14px;
}

.service-button {
	border: 1px solid #DDDDDD;
	color: #666;
	flex: 1;
}

.track-button {
	border: 1px solid #DDDDDD;
	color: #666;
	flex: 1;
}

.evaluate-button {
	background-color: #FF6B35;
	color: white;
	flex: 1;
}

/* 评价弹窗样式 */
.rating-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.modal-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	border-bottom: 1px solid #F0F0F0;
}

.modal-title {
	font-size: 16px;
	font-weight: bold;
}

.close-icon {
	font-size: 22px;
	color: #999;
}

.rating-content {
	padding: 15px;
}

.product-brief {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.product-thumbnail {
	width: 50px;
	height: 50px;
	border-radius: 5px;
	margin-right: 10px;
}

.product-brief-name {
	font-size: 14px;
	color: #666;
	flex: 1;
}

.star-rating {
	margin-bottom: 20px;
}

.rating-label {
	font-size: 14px;
	color: #333;
	margin-bottom: 10px;
}

.stars {
	display: flex;
	justify-content: center;
}

.star {
	width: 30px;
	height: 30px;
	margin: 0 5px;
}

.review-input {
	margin-bottom: 20px;
}

.review-input textarea {
	width: 100%;
	height: 100px;
	padding: 10px;
	border: 1px solid #EEEEEE;
	border-radius: 5px;
	font-size: 14px;
}

.photo-upload {
	margin-bottom: 20px;
}

.upload-button {
	width: 80px;
	height: 80px;
	border: 1px dashed #DDDDDD;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.plus-icon {
	font-size: 24px;
	color: #CCCCCC;
	margin-bottom: 5px;
}

.upload-text {
	font-size: 12px;
	color: #999;
}

.submit-button {
	background-color: #FF6B35;
	color: white;
	padding: 12px;
	text-align: center;
	border-radius: 25px;
	font-size: 16px;
}
</style>
